<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jQuery Live Form Validation Advanced Demo</title>
        <link rel="stylesheet" type="text/css" href="../stylesheets/jquery.validate.css" />
        <link rel="stylesheet" type="text/css" href="../stylesheets/style.css" />
        <script src="../lib/jquery/jquery-1.3.2.js" type="text/javascript">
        </script>
        <script src="../javascripts/jquery.validate.js" type="text/javascript">
        </script>
        <script src="../javascripts/jquery.validation.functions.js" type="text/javascript">
        </script>
        <script type="text/javascript">
            /* <![CDATA[ */
            jQuery(function(){
                jQuery("#ValidField").validate({
                    expression: "if (VAL) return true; else return false;",
                    message: "Please enter the Required field"
                });
                jQuery("#ValidNumber").validate({
                    expression: "if (!isNaN(VAL) && VAL) return true; else return false;",
                    message: "Please enter a valid number"
                });
                jQuery("#ValidInteger").validate({
                    expression: "if (VAL.match(/^[0-9]*$/) && VAL) return true; else return false;",
                    message: "Please enter a valid integer"
                });
                jQuery("#ValidDate").validate({
                    expression: "if (!isValidDate(parseInt(VAL.split('-')[2]), parseInt(VAL.split('-')[0]), parseInt(VAL.split('-')[1]))) return false; else return true;",
                    message: "Please enter a valid Date"
                });
                jQuery("#ValidEmail").validate({
                    expression: "if (VAL.match(/^[^\\W][a-zA-Z0-9\\_\\-\\.]+([a-zA-Z0-9\\_\\-\\.]+)*\\@[a-zA-Z0-9_]+(\\.[a-zA-Z0-9_]+)*\\.[a-zA-Z]{2,4}$/)) return true; else return false;",
                    message: "Please enter a valid Email ID"
                });
                jQuery("#ValidPassword").validate({
                    expression: "if (VAL.length > 5 && VAL) return true; else return false;",
                    message: "Please enter a valid Password"
                });
                jQuery("#ValidConfirmPassword").validate({
                    expression: "if ((VAL == jQuery('#ValidPassword').val()) && VAL) return true; else return false;",
                    message: "Confirm password field doesn't match the password field"
                });
                jQuery("#ValidSelection").validate({
                    expression: "if (VAL != '0') return true; else return false;",
                    message: "Please make a selection"
                });
                jQuery("#ValidMultiSelection").validate({
                    expression: "if (VAL) return true; else return false;",
                    message: "Please make a selection"
                });
                jQuery("#ValidRadio").validate({
                    expression: "if (isChecked(SelfID)) return true; else return false;",
                    message: "Please select a radio button"
                });
                jQuery("#ValidCheckbox").validate({
                    expression: "if (isChecked(SelfID)) return true; else return false;",
                    message: "Please check atleast one checkbox"
                });
				jQuery('.AdvancedForm').validated(function(){
					alert("Use this call to make AJAX submissions.");
				});
            });
            /* ]]> */
        </script>
    </head>
    <body>
        <div class="Tabs">
            <a href="../">Simple Demo</a>
            <a href="#" class="Active">Advanced Demo</a>
        </div>
        <div class="TabBody">
            <h1>jQuery Live Form Validation Advanced Demo</h1>
            <form action="" method="post" class="AdvancedForm">
                <table cellpadding="3" cellspacing="2">
                    <tr>
                        <td>
                            Enter a Required Field
                        </td>
                        <td>
                            <input type="text" name="ValidField" id="ValidField" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Enter a Number
                        </td>
                        <td>
                            <input type="text" name="ValidNumber" id="ValidNumber" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Enter an Integer
                        </td>
                        <td>
                            <input type="text" name="ValidInteger" id="ValidInteger" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Enter a Date (MM-DD-YYYY)
                        </td>
                        <td>
                            <input type="text" name="ValidDate" id="ValidDate" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Enter Email ID
                        </td>
                        <td>
                            <input type="text" name="ValidEmail" id="ValidEmail" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Password
                        </td>
                        <td>
                            <input type="password" name="ValidPassword" id="ValidPassword" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Confirm Password
                        </td>
                        <td>
                            <input type="password" name="ValidConfirmPassword" id="ValidConfirmPassword" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Make a selection
                        </td>
                        <td>
                            <select name="ValidSelection" id="ValidSelection">
                                <option value="0">Make a Selection</option>
                                <option value="Option 1">Option 1</option>
                                <option value="Option 2">Option 2</option>
                                <option value="Option 3">Option 3</option>
                                <option value="Option 4">Option 4</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Make a multi-selection
                        </td>
                        <td>
                            <select name="ValidMultiSelection" id="ValidMultiSelection" multiple="multiple">
                                <option value="Option 1">Option 1</option>
                                <option value="Option 2">Option 2</option>
                                <option value="Option 3">Option 3</option>
                                <option value="Option 4">Option 4</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Select a Radio Button
                        </td>
                        <td>
                            <span id="ValidRadio" class="InputGroup">
                                <label for="ValidRadio_1">
                                    <input type="radio" name="ValidRadio" id="ValidRadio_1" value="1" />Radio Button 1
                                </label>
                                <br/>
                                <label for="ValidRadio_2">
                                    <input type="radio" name="ValidRadio" id="ValidRadio_2" value="2" />Radio Button 2
                                </label>
                                <br/>
                                <label for="ValidRadio_3">
                                    <input type="radio" name="ValidRadio" id="ValidRadio_3" value="3" />Radio Button 3
                                </label>
                                <br/>
                                <label for="ValidRadio_4">
                                    <input type="radio" name="ValidRadio" id="ValidRadio_4" value="4" />Radio Button 4
                                </label>
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Select a Checkbox Button
                        </td>
                        <td>
                            <span id="ValidCheckbox" class="InputGroup">
                                <label for="ValidCheckbox_1">
                                    <input type="checkbox" name="ValidCheckbox" id="ValidCheckbox_1" value="1" />Checkbox 1
                                </label>
                                <br/>
                                <label for="ValidCheckbox_2">
                                    <input type="checkbox" name="ValidCheckbox" id="ValidCheckbox_2" value="2" />Checkbox 2
                                </label>
                                <br/>
                                <label for="ValidCheckbox_3">
                                    <input type="checkbox" name="ValidCheckbox" id="ValidCheckbox_3" value="3" />Checkbox 3
                                </label>
                                <br/>
                                <label for="ValidCheckbox_4">
                                    <input type="checkbox" name="ValidCheckbox" id="ValidCheckbox_4" value="4" />Checkbox 4
                                </label>
                                <br/>
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                        </td>
                        <td>
                            <input type="submit" value="Submit" id="FormSubmit" style="background: #EFEFEF;"/>
                        </td>
                    </tr>
                </table>
            </form>
            <div class="ValidXHTML">
                <a href="http://validator.w3.org/check?uri=referer" target="_blank"><img src="../images/valid-xhtml.gif" alt="Valid XHTML 1.0 Transitional" border="0" /></a>
            </div>
        </div>
        <script type="text/javascript">
            /* <![CDATA[ */
            var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
            document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
            /* ]]> */
        </script>
        <script type="text/javascript">
            /* <![CDATA[ */
            try {
                var pageTracker = _gat._getTracker("UA-10628239-1");
                pageTracker._trackPageview();
            } 
            catch (err) {
            }
            /* ]]> */
        </script>
    </body>
</html>
